<template>
    <div>
        <!-- 自定义日期段 -->
        <div class="all-container">
            <!-- 功能栏 -->
            <el-row>
                <el-col :span="24" class="table-fun">
                    <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="refresh">刷新</div>
                    <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="modWin=true;winTitle='添加'">添加</div>
                    <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="modWin=true;winTitle='修改'">修改</div>
                    <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="del">删除</div>
                </el-col>
            </el-row>
            <!-- 表格栏 -->
            <avue-crud :data="dateList.data" :option="dateList.option"  @current-row-change="rowChange" :page="dateList.page"  @current-change="cusPage"></avue-crud>
            <!-- 修改弹窗 -->
            <div v-show="modWin" class="modModal">
                <!-- 标题栏 -->
                <el-row class="add-title">
                     <div class="closeWin" @click="closeModWin">X</div>
                    <el-col :span="24">
                        <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">{{winTitle}}</span>
                    </el-col>
                </el-row>
                <!-- 表单栏 -->
                <!-- 第一行 -->
                <el-row class="user-row">
                    <el-col :span="24">
                        <div class="lf choose-title">名称</div>
                        <el-input v-model="modName" placeholder="" size="mini" style="width:150px;" class="lf choose-input user-input"></el-input>
                    </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row class="user-row">
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="24">
                                <div class="lf choose-title">时间</div>
                                <el-date-picker
                                v-model="dateFrom"
                                type="date"
                                placeholder="选择日期" class="lf" size="mini" style="width:150px">
                                </el-date-picker>
                                <div class="lf choose-title">&nbsp;&nbsp;至</div>
                                <el-date-picker
                                v-model="dateTo"
                                type="date"
                                placeholder="选择日期" class="lf" size="mini" style="width:150px">
                                </el-date-picker>
                            </el-col>
                        </el-row>
                        <!-- <el-input v-model="GongName" placeholder="" size="mini" style="width:150px;" class="lf choose-input org-input"></el-input> -->
                    </el-col>
                </el-row>
                <!-- 第三行 -->
                <el-row class="user-row">
                    <el-col :span="24">
                        <div class="lf choose-title">备注</div>
                        <el-input v-model="remark" placeholder="" size="mini" style="width:450px;" class="lf choose-input user-input"></el-input>
                    </el-col>
                </el-row>
                <!-- 按钮 -->
                <button class="check-btn rf" @click="closeModWin">
                <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                <button class="check-btn rf" @click="winTitle=='添加'?add():mod()"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
            </div>
        </div>
    </div>
</template>

<script>
import qs from "qs";
import TableData from "../../components/common/tableData"
export default {
  data: function() {
    return {
      dateList: {
        page: {
          pageSizes: [10],
          total: 20,
          currentPage: 1,
          pageSize: 10,
        },
        data:[],
        option:{
            highlightCurrentRow:true,
            page:true,
            menu:false,
            align:'center',
            menuAlign:'center',
            column:[
              {
                label:"名称",
                prop:"name"
              },
              {
                label:"起始时间",
                prop:"create_time"
              },
              {
                label:"结束时间",
                prop:"end_date"
              },
              {
                label:"备注",
                prop:"remark"
              },
            ]
        }
      },
      modWin: false,
      modName: "",
      dateFrom: "",
      dateTo: "",
      remark: "",
      currentRow:"",
      winTitle:"test"
    };
  },
  methods: {
    cusPage(val){
      this.dateList.page.currentPage=val;
      this.getDateList();
    },
    getDateList() {
      this
        .postRequest("/sys/customdatescope/list",{
          rows:10,
          page:this.dateList.page.currentPage
        })
        .then(data => {
          this.dateList.page.total=data.data.totalRow;
          this.dateList.data=data.data.list
        });
    },
    refresh() {
      this.getDateList();
    },
    add() {
      this
        .postRequest(
          "/sys/customdatescope/add?sysUser.id=&customDateScope.name="+this.modName+"&customDateScope.start_date="+this.dateToString(this.dateFrom)+"&customDateScope.end_date="+this.dateToString(this.dateTo)+"&customDateScope.remark="+this.remark
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getDateList();
            this.modWin=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    closeModWin() {
      this.modWin = false;
    },
    mod() {
      this.postRequest("/sys/customdatescope/update?sysUser.id="+this.currentRow.id+"&customDateScope.name="+this.modName+"&customDateScope.start_date="+this.dateToString(this.dateFrom)+"&customDateScope.end_date="+this.dateToString(this.dateTo)+"&customDateScope.remark="+this.remark).then(data=>{
        this.msgShow(data,function(){});
        this.modWin=false;
      })
    },
    del() {
      this
        .postRequest(
          "/sys/customdatescope/del",{
            id:this.currentRow.id
          }
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getDateList();
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    rowChange(val){
      this.currentRow=val;
      this.modName=val.name;
      this.dateFrom=val.start_date;
      this.dateTo=val.end_date;
      this.remark=val.remark;
      if(this.winTitle=='添加'){
        this.modName="";
        this.dateFrom="";
        this.dateTo="";
        this.remark="";
      }
    }
  },
  computed: {},
  components:{TableData},
  watch: {
    winTitle(){
      if(this.winTitle=='添加'){
        this.modName="";
        this.dateFrom="";
        this.dateTo="";
        this.remark="";
      }
    }
  },
  mounted() {
    console.log("cusDate");
    this.getDateList();
    this.$emit("sendActive", "3-3");
  }
};
</script>
<style scoped src="../../assets/css/allManage/cusDate.css">
</style>